<template>
  <div class="template-library-content">
    <!--start tabs选项 -->
    <ul class="tabs-card-type">
      <li :class="{'active': tabIndex == index}" v-for="(item,index) in cardSysList" :key="index" @click="onTabsCard(index)">{{item.name}}</li>
    </ul>
    <!--end tabs选项 -->

    <!--start 组件库列表 -->
    <div class="tabs-card-item" v-if="cardSysList.length>0">
      <el-card class="tabs-card-box" v-for="cardItem in cardSysList[tabIndex].list" :key="cardItem.cardId" >
        <div class="tabs-card-li">
          <div class="task-card-inforn"> 
            <!-- 原templateName字段因为涉及判断，和后端确认后，从templateNameLanguage里取 -->
            <h2 class="task-card-name">{{cardItem | getTemplateName}}<span class="task-card-angle">{{cardItem.typeName}}</span></h2>                                       
            <p class="task-card-des">{{cardItem.description}}</p>
          </div>
          <div class="task-card-fields">
            <p>{{$t('customer.setting.templateLibrary.label1')}}：</p>
            <p class="fields-list">{{cardItem.fields}}</p>
          </div>
          <div class="task-card-footer">
            <template v-if="cardItem.type!=='工时'">
              <el-button type="primary" class="preview btn" @click="previewCard(cardItem)">{{$t('common.base.preview')}}</el-button>
              <el-tooltip class="item" effect="dark" :content="contentSingle" placement="top">
                <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'single')">{{$t('customer.setting.templateLibrary.btn1')}}</el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="contentMul" placement="top">
                <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'multiple')">{{$t('customer.setting.templateLibrary.btn2')}}</el-button>
              </el-tooltip>  
            </template>   
            <template v-else>
              <el-button type="primary" class="preview btn" @click="previewCard(cardItem)">{{$t('common.base.preview')}}</el-button>
              <el-tooltip class="item" effect="dark" :content="$t('customer.setting.templateLibrary.des1')" placement="top">
                <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'multiple')">{{$t('common.base.addModule', {module:''})}}</el-button>
              </el-tooltip>
            </template>
          </div>
        </div>
      </el-card>
    </div>
    <!--end  组件库列表 -->

    <!--start 预览组件 -->
    <preview-card-dialog ref="previewDialog" :fields="fields"></preview-card-dialog>
    <!--end 预览组件 -->
  </div>
</template>
<script>
// api
import * as SettingCusProApi from '@src/api/SettingCusProApi';
// components
import PreviewCardDialog from './PreviewCardDialog';
import i18n from '@src/locales'
import { localStorageKey } from 'pub-bbx-global/lang/dist';
const shbLocale = localStorage.getItem(localStorageKey)
export default {
  name: 'template-library',
  props: {
    cardSysList:{
      type: Array,
      default: () => ([])
    },
    cardType:String
  },
  data() {
    return {
      fields:[],
      tabIndex:0,
    };
  },
  filters: {
    getTemplateName(item) {
      const defaultName = item.templateName
      if(!item.templateNameLanguage) return defaultName
      return item.templateNameLanguage[shbLocale] || defaultName
    }
  },
  computed:{
    contentSingle(){
      return i18n.t('customer.setting.templateLibrary.des2', {data1: this.cardType==='customer'? i18n.t('common.form.type.customer') : i18n.t('common.form.type.product')})
    },
    contentMul(){
      return i18n.t('customer.setting.templateLibrary.des3', {data1: this.cardType==='customer'? i18n.t('common.form.type.customer') : i18n.t('common.form.type.product')})
    }
  },
  methods: {
    onTabsCard(index){
      this.tabIndex = index;
    },
    // 添加为单次/多次
    importcard(id, inputType) {
      SettingCusProApi.cardImport({id, inputType,cardType:this.cardType}).then(res=>{
        const { code, message } = res;
        if(code == 0){
          this.$message.success(this.$t('customer.setting.templateLibrary.tips1'));
          setTimeout(()=>{
            this.$emit('importSuc');
          }, 1000)
        }else{
          this.$message.warning(message);
        }
      }).catch(error=>({}))
    },

    // 预览组件
    previewCard(card) {
      this.fields = card.fieldsModule;
      this.$refs.previewDialog.openDialog();
    }
  },
  components: {
    [PreviewCardDialog.name]: PreviewCardDialog
  },
};
</script>
<style lang="scss" scoped>
.template-library-content {
  width: 100%;
  .tabs-card-type {
    display: flex;
    justify-content: flex-start;
    padding-inline-start: 0;
    li {
      width: 101px;
      height: 50px;
      line-height: 50px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      list-style: none;
      font-size: 16px;
      text-align: center;
      margin-right: 12px;
      cursor: pointer;
    }
    .active{
        background: linear-gradient(135deg, $color-primary-light-3 0%, $color-primary-light-6 100%);
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.08);
        color: #fff;
    }
  }
  .tabs-card-item{
    display: flex;
    flex-flow: wrap;
    @include dynamic-card-list(2, 'tabs-card-box');
    .tabs-card-box{
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04); 
        &:hover{
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
        }
        .task-card-inforn{
            .task-card-name{  
                margin-bottom: 0;
                @include text-ellipsis;
                padding-right: 32px;
                font-size: 16px;
                color: #333333;
                line-height: 22px;
                .task-card-angle{
                    padding: 0 8px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 12px;
                    background: rgba(250, 140, 22, 0.2);
                    border-radius: 11px;
                    font-weight: 500;
                    color: #FA8C16;
                    border: 1px solid rgba(250, 140, 22, 0.2);
                    text-align: center;
                    display: inline-block;
                    margin-left: 8px;
                }
            }
            .task-card-des{
                height: 34px;
                font-size: 12px; 
                color: #666666;
                line-height: 17px;
                margin-top: 8px;
                @include text-ellipsis-2; 
                cursor: pointer;
                margin-block-end: 0em;

            }
        }
        .task-card-fields{
            margin: 8px 0 12px 0;
            height: 52px;
            p{
                margin-bottom: 0;
                font-size: 12px;
            }
            :first-child{
                color: #666666;
                margin-bottom: 4px;
            }
            .fields-list{
              color: #333333;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }

        }
        .task-card-footer{
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            .btn{
              // padding: 7px 17px;
              // width: 92px;
              margin-top: 12px;
              padding: 4px 6px !important;
              & + .btn {
                margin-left: 8px;
              }
            }
            .el-button--small{
              padding: 6px 15px;
            }
            .preview{
                background: $color-primary-light-1;
                border-color: $color-primary-light-2;
                color: $color-primary-light-6;
            }
            
        }

    }
  }
  
}
</style>